<div class="row title-bar">
    <div class="col-xs-1">
        <button class="btn btn-success" (click)="addNew(addModal)">
          <i class="glyphicon glyphicon-plus-sign"></i> 添加</button>
    </div>
    <div class="col-xs-1">
        <button class="btn btn-success" (click)="upload(uploadModal)">
          <i class="glyphicon glyphicon-open"></i> 导入</button>
    </div>
    <div class="col-xs-3">
        <button class="btn btn-success" (click)="export()">
            <i class="glyphicon glyphicon-save"></i> 导出</button>
    </div>
    <div class="col-xs-7 search-bar">
        <input type="text" class="form-control search" [(ngModel)]="searchLesson" name="searchLesson" placeholder="请输入课程名称" (ngModelChange)="change2search()">
        <input type="text" class="form-control search" [(ngModel)]="searchTeacher" name="searchTeacher" placeholder="请输入教师名称">
        <input type="text" class="form-control search" [(ngModel)]="searchCommunity" name="searchCommunity" placeholder="请输入社区名称">
        <button class="btn btn-info" (click)="search()">
            <i class="glyphicon glyphicon-search"></i> 搜索</button>
        <button class="btn btn-info" (click)="clear()" style="margin-left: 5px">
            <i class="glyphicon glyphicon-remove"></i> 清空</button>
    </div>
</div>

<table class="table table-striped mt20">
  <thead>  
    <tr>
        <th>ID</th>
        <th>课程名称</th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th>上课地点</th>
        <th>上课地点联系人</th>
        <th>上课地点联系方式</th>
        <th>配送教师</th>
        <th>配送教师联系方式</th>
        <th>操作</th>
    </tr>
  </thead>
  <tbody *ngIf="array.length!==0">
    <tr *ngFor="let data of array">
      <td>{{data.id || '--'}}</td>
      <td>{{ data.lesson ? data.lesson.name : '--'}}</td>
      <td>{{(data.startTime | date:'yyyy-MM-dd HH:mm:ss') || '--'}}</td>
      <td>{{data.endTime | date:'yyyy-MM-dd HH:mm:ss' || '--'}}</td>
      <td>{{data.community ? data.community.name : '--'}}</td>
      <td>{{data.community ? data.community.contactBody : '--'}}</td>
      <td>{{data.community ? data.community.contactPhone : '--'}}</td>
      <td>{{data.teacher ? data.teacher.name : '--'}}</td>
      <td>{{data.teacher ? data.teacher.contact : '--'}}</td>  
      <td>
        <button type="button" title="删除" class="btn btn-default glyphicon glyphicon-trash" (click)="delete(data, deleteModal)"></button>
        <button type="button" title="编辑" class="btn btn-default glyphicon glyphicon-pencil" (click)="edit(data, addModal)"></button>
      </td>  
    </tr>  
  </tbody>
</table>
<p *ngIf="array.length ===0" class="txt-center">暂无数据</p>

<!-- 分页 -->
<div *ngIf="array.length !== 0" class="row">
  <div class="col-xs-12 col-12">
    <pagination [totalItems]="bigTotalItems" [(ngModel)]="bigCurrentPage" [maxSize]="maxSize" class="pagination-sm" [boundaryLinks]="true" [rotate]="false" (numPages)="numPages = $event"
     (pageChanged)="pageChanged($event)"></pagination>
  </div>
</div>
 
<!-- add | edit -->
<div id='add' name='add' class="modal fade" bsModal #addModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title darkGreen">
            <span *ngIf="addOrEdit === 'add'">添加任务</span>
            <span *ngIf="addOrEdit === 'edit'">编辑任务</span>
        </h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <!-- form-box -->
        <form novalidate class="form-horizontal">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-3 control-label">课程名称：</label>
              <div class="col-sm-9">
                <select required class="col-sm-3 form-control" style="width:300px !important; " [(ngModel)]="lessionId" name="lessionId">
                    <option class="col-md-1" *ngFor="let course of course" [value]="course.id">{{course.name}}</option>  
                </select> 
              </div>
            </div>
            <!-- start time  -->
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label">开始时间：</label>
              <div class="col-sm-9 date-time">
                <!-- date -->
                <div class="">
                  <div class="col-xs-4 col-lg-4 col-md-4 form-group">
                    <input type="text" required
                           class="form-control"
                           #dp="bsDatepicker"
                           bsDatepicker [(bsValue)]="bsValue">
                  </div>
                  <div class="col-xs-3 col-lg-3 col-md-3 form-group">
                    <button class="btn btn-success glyphicon glyphicon-calendar" (click)="dp.toggle()"></button>
                  </div>
                </div>
                <!-- time -->
                <timepicker [showMeridian]="false" [showSpinners]="false" [(ngModel)]="mytime" name="mytime" class='time'></timepicker>
 
              </div>
            </div>
            <!-- end time  -->
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label">结束时间：</label>
              <div class="col-sm-9 date-time">
                <!-- date -->
                <div class="">
                  <div class="col-xs-4 col-lg-4 col-md-4 form-group">
                      <input required class="form-control" #dpEnd="bsDatepicker" bsDatepicker [(ngModel)]="bsValueEnd" name="bsValueEnd">
                  </div>
                  <div class="col-xs-3 col-lg-3 col-md-3 form-group">
                    <button class="btn btn-success glyphicon glyphicon-calendar" (click)="dpEnd.toggle()"></button>
                  </div>
                </div>
                <!-- time -->
                <timepicker [(ngModel)]="mytimeEnd" name="mytimeEnd" [showMeridian]="false" [showSpinners]="false"></timepicker>
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label">上课地点：</label>
              <div class="col-sm-9">
                <select required class="col-sm-3 form-control" style="width:300px !important; " [(ngModel)]="communityId" name="communityId">
                    <option class="col-md-1" *ngFor="let community of communities" [value]="community.areaId">{{community.name}}</option>  
                </select> 
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label">描述：</label>
              <div class="col-sm-9">
                <textarea class="form-control" rows="3" [(ngModel)]="content" name="content"></textarea>
              </div>
            </div>
            <div class="form-group" style="text-align: center; ">
              <div class="col-lg-12 col-md-12 col-sm-12">

                <button type="submit" class="btn btn-success"
                    (click)="onSubmit(id, lessionId, communityId, bsValue, mytime, bsValueEnd, mytimeEnd, content, addModal)">
                   确定
                </button>
                <button type="button" class="btn btn-info" (click)="addModal.hide()">取消</button>
              </div>
            </div>
          </form>
      </div>
    </div>
  </div>
</div>

<!-- editTask -->
<div id='edit' name='editTask' class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left darkGreen">添加任务</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form  novalidate
            class="form-horizontal form-box">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-3 control-label">用户名:</label>
              <div class="col-sm-9">

              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label">密码：</label>
              <div class="col-sm-9">
                <input type="password" class="form-control" id="inputPassword3" placeholder="密码" name="pwd" #pwd>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Remember me
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">

                <button type="submit" class="btn btn-default"
                    (click)="onSubmit(userName, pwd)">
                    <i class="glyphicon glyphicon-hand-right"
                     ></i>登录
                </button>

              </div>
            </div>

          </form>
      </div>
    </div>
  </div>
</div>

<!--deleteTask -->
<div id='delete' name='delete' class="modal fade deleteModal" bsModal #deleteModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left darkGreen">删除</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body txt-center">
        <p style="margin-bottom: 20px;">是否删除此数据</p>

          <button type="submit" class="btn btn-success" (click)="deleteConfirm(data,deleteModal)">确认</button> 
          <button type="submit" class="btn btn-info" (click)="deleteModal.hide()">取消</button>
      </div>

    </div>
  </div>
</div>

<!-- 上传 -->
<div id='upload' name='upload' class="modal fade" bsModal #uploadModal="bs-modal"
     [config]="{backdrop: 'static'}" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left darkGreen">上传</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="uploadModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <form id="zz" action="http://edu.xk.com/xkapi/task/upload" method="post" target='_blank' enctype="multipart/form-data" class="txt-center">
              <input type="file" name="file" value="选择excel文件"/>  
              <input id="submit_form" type="submit" class="btn btn-success save" value="保存" (click)="uploadConfirm(uploadModal)" />

          </form> 
      </div>

    </div>
  </div>
</div>